import { getLayoutProps } from "@/common/layout/getProps";
import { DownloadOutlined, PlusOutlined } from "@ant-design/icons";
import { useRouter } from "next/navigation";
import type { Key} from "react";
import { useState,useEffect } from "react";
import { data } from "./data";
import { PageContainer } from "@ant-design/pro-layout";
import { Button, Divider, Form, Input, Modal, Row, Table, Pagination, message } from "antd";
import type { TableColumnsType , TableProps } from "antd";
import { ProForm } from "@/components/ProForm";
import { http } from "@/utils/request";

type TableDataType = {
  field1: string;
  field2: string;
  field3: string;
  field4: string;
  field5: string;
  field6: string;
  field7: string;
  field8: string;
  field9: string;
  field10: string;
}


const { confirm } = Modal;
const Index = () => {
  const router = useRouter();
  const [form] = Form.useForm();
  const [list, setList] = useState([]);
  const [pageNum,setPageNum] = useState(1);
  const [pageSize,setPageSize] = useState(10);
  const [total,setTotal] = useState();
  const columns: TableColumnsType<TableDataType> = [
    {
      align: "center",
      title: "序号",
      width: 60,
      key: "index",
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      align: "center",
      title: "单据编号",
      dataIndex: "code"
    },
    {
      align: "center",
      title: "申请人",
      dataIndex: "personName"
    },
    {
      align: "center",
      title: "所属部门",
      dataIndex: "deptName"
    },
    {
      align: "center",
      title: "部门总监",
      dataIndex: "deptLeader"
    },
    {
      align: "center",
      title: "申请日期",
      dataIndex: "applyTime"
    },
    {
      align: "center",
      title: "考核频次",
      dataIndex: "evaluFrequency",
      render: (_, record) => {
        return (
          <>
            {record.evaluFrequency === "YEAR" && <span>年度</span>}
            {record.evaluFrequency === "QUARTER" && <span>季度</span>}
            {record.evaluFrequency === "MONTH" && <span>月度</span>}
          </>
        )
      }
    },
    {
      align: "center",
      title: "考核周期",
      dataIndex: "evaluPersion"
    },
    {
      align: "center",
      title: "申请状态",
      fixed:'right',
      dataIndex: "auditStatus",
      render: (_, record) => {
        return (
          <>
            {record.auditStatus === "1" && <span>待提交</span>}
            {record.auditStatus === "2" && <span>审核中</span>}
            {record.auditStatus === "3" && <span>已完成</span>}
          </>
        )
      }
    },
    {
      align: "center",
      title: "操作",
      width:220,
      fixed:'right',
      render: (_, record, index) => {
        return (
          <>
            <Button type={'link'} onClick={() => {
              router.push(`/performanceAppraise/employeePointsApply/employeePointsApplyDetail?id=${record.id}&type=detail`)
            }}>详情</Button>
            
            {record.auditStatus === "1" && 
            <>
              <Button type={'link'} onClick={() => {
                router.push(`/performanceAppraise/employeePointsApply/employeePointsApplyEdit?id=${record.id}`)
              }}>编辑</Button>
              <Button type={'link'} danger onClick={() => {
                confirm({
                  title: '提示?',
                  content: '此操作将永久删除该数据，是否继续?',
                  cancelText:'取消',
                  okText:'确定',
                  onOk() {
                    delData(record.id)
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                });
              }}>删除</Button>
            </>
            }
          </>
        )
      }
    }
  ]


  const lunchAppraise = () => {
    router.push(`/performanceAppraise/employeePointsApply/employeePointsApplyCreate`)
  }
  //修改页码或分页大小
  const changePagination = async (page: number, size: number)=>{
    setPageNum(page);
    if(size!==pageSize){
      setPageNum(1);
    }
    setPageSize(size);
  }
  //删除
  const delData = async(id:number) =>{
    try {
      const res = await http.delete({
        url:'/PmFractionApply/deletePmFractionApply',
        params:{
          devaluLeaderId:id,
        }
      })
      if(res.code==200){
        message.success('删除成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  //查询接口
  const getList = async() =>{
    try {
      const res = await http.get({
        url:'/PmFractionApply/pmFractionApplyList',
        params:{
          code:form.getFieldValue('code'),
          deptName:form.getFieldValue('deptName'),
          pageNum:pageNum,
          pageSize:pageSize,
        }
      })
      setList(res.rows);
      setTotal(res.total);
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  useEffect(()=>{
    getList();
  },[pageNum,pageSize])
  return (
    <PageContainer>
      <ProForm form={form} layout={'inline'} onSearch={getList} onReset={getList}>
        <Form.Item
          label={'单据编号'}
          name="code"
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          label={'所属部门'}
          name="deptName"
        >
          <Input placeholder="请输入" />
        </Form.Item>
      </ProForm>

      <Divider className={'my-[20px]'}></Divider>

      <Row className={'mb-[20px]'} justify={'space-between'}>
        <Button type={'primary'} icon={<PlusOutlined />} onClick={lunchAppraise}>发起申请</Button>
      </Row>

      <Table
        scroll={{x:1800}}
        dataSource={list}
        columns={columns}
        rowKey={(record) => `${record.id}`}
        bordered
        pagination={false}
      ></Table>
      <Pagination
        className={'m-[20px] text-end'}
        current={pageNum}
        pageSize={pageSize}
        total={total}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
        onChange={changePagination}
      />
    </PageContainer>
  )
}

export const getServerSideProps = getLayoutProps;
export default Index;
